<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Zoom + Pan</title>
    <style>

        .overlay {
            fill: none;
            pointer-events: all;
        }

    </style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="Interaction.js"></script>
<script src="GeoLib2.js"></script>
<script>

    Main_Bound_region.svg_height = 900,
            Main_Bound_region.svg_width = 1100;

    var randomX = d3.random.normal(Main_Bound_region.svg_width / 2, 80),
            randomY = d3.random.normal(Main_Bound_region.svg_height  / 2, 80);

    var data = d3.range(2000).map(function() {
        return [
            randomX(),
            randomY()
        ];
    });

    Main_Bound_region.SVG();
    var svg =Main_Bound_region.G()
            .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", function(){
                Inter_Tech.zoom(svg);
            }))
            .append("g");


    svg.append("rect")
            .attr("class", "overlay")
            .attr("width", Main_Bound_region.svg_width)
            .attr("height", Main_Bound_region.svg_height);

    svg.selectAll("circle")
            .data(data)
            .enter().append("circle")
            .attr("r", 2.5)
            .attr("transform", function(d) { return "translate(" + d + ")"; })
            .on("mouseover", function(){
                Inter_Tech.Zoom_on(this, 'r', 7);
                Inter_Tech.Zoom_on(this, 'fill', "blue");
            }).on("mouseout",function(){
                Inter_Tech.Zoom_out(this, 'r', 2.5);
                Inter_Tech.Zoom_out(this, 'fill', 'red');
            });

</script>
</body>
</html>